<template>
  <el-container>
    <el-header>
      <el-button @click="goBack">返回</el-button>
    </el-header>
    <el-main>
      <el-card>
        <h2>{{ stationDetails.name }}</h2>
        <p>{{ stationDetails.description }}</p>
        <p>费用: {{ stationDetails.price }} 元/度</p>
        <el-button type="primary" @click="startCharging">开始充电</el-button>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const stationDetails = ref({});

const fetchStationDetails = async () => {
  const stationId = route.params.id;
  try {
    const response = await axios.get(`/station/${stationId}`);
    stationDetails.value = response.data;
  } catch (error) {
    console.error('Error fetching station details:', error);
  }
};

const startCharging = async () => {
  try {
    const response = await axios.post('/charging/start', {
      stationId: stationDetails.value.id,
    });
    if (response.data.success) {
      router.push(`/charging/start/${response.data.orderNumber}`);
    }
  } catch (error) {
    console.error('Error starting charging:', error);
  }
};

const goBack = () => {
  router.back();
};

onMounted(fetchStationDetails);
</script>
